
<template>
    <div class="csn" @click="PushWork">发布作品</div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted, toRaw } from 'vue'
import {useComponents} from  '@/stores/counter'
import {useCanvasStore} from '@/stores/index'
import { storeToRefs } from 'pinia';
const {canvasComponents} =storeToRefs(useComponents())
const {canvasDom}=storeToRefs(useCanvasStore())
//插入提示
import {ElMessage} from 'element-plus'
//插入图片将dom元素转换成图片的插件
import DomToImage from 'dom-to-image';
//插入发布的接口 发给另一个路由 将其渲染 
import {PushWorks} from '@/api/canvas'
import { useRouter } from 'vue-router';
import { json } from 'stream/consumers';
const router=useRouter()
const PushWork=async ()=>{
// alert(14)
//第一步引入仓库画布
//第二步发起异步请求
//判断 画布长度是否不为0
if(canvasComponents.value.length !=0){
    let Base64=await DomToImage.toPng(canvasDom.value);//转换为base64格式
//获取用户id 会话存储
let  userId:any=sessionStorage.getItem('userId');//对象
// let userId=JSON.parse(sessionStorage.getItem('userId'))
console.log(userId,"毒药前端 ");

let  {data:{msg,code}}=await PushWorks({
    //传给api PushWorks接受 解构赋值
   userId,
    Base64,
    workData:toRaw(canvasComponents.value)

})
if(code===0){
    //0也表示成功
    ElMessage({
        message:msg,
        type:'success',
        duration:1500,
        onClose(){
            router.push('/home/myw')
            //我的作品页面
            //去canvas.js
        }
    })
}
}


}
</script>
<style lang='scss' scoped>
.csn {
    font-size: 16px;
    // display: flex;
    // align-items: center;
    // margin-left: -50px;
}
</style>